<script setup>
import { useRouter } from "vue-router";
import { SwitchButton } from "@element-plus/icons-vue";

const router = useRouter();

const toPath = (path, e) => {
  router.push(path);
};

const homeTitle = computed(() => {
  return window.globalObj.homeTitle;
});

const goOut = () => {
  ElMessageBox.confirm("确定要退出登录吗？", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      router.push("/login");
    })
    .catch(() => {});
};
</script>
<template>
  <div class="index_d_Box">
    <div class="first-tab-box1">
      <el-icon
        :size="20"
        color="#fff"
        class="quite"
        title="退出登录"
        @click="goOut"
        ><SwitchButton
      /></el-icon>
      <div class="title">{{ homeTitle }}</div>
      <div class="tabs">
        <div class="el_tab" @click="toPath('/jbfa/jbfa')">
          <img src="@/assets/app/jbfa.png" />
          <p>基本方案</p>
        </div>
        <div class="el_tab" @click="toPath('/pzzh/rwxqyy')">
          <img src="@/assets/app/bzjh.png" />
          <p>平战转换行动计划</p>
        </div>
        <div class="el_tab" @click="toPath('/ryfh/rkfb')">
          <img src="@/assets/app/ryfh.png" />
          <p>人员防护行动计划</p>
        </div>
        <div class="el_tab" @click="toPath('/kqzy/rwxqyy')">
          <img src="@/assets/app/xdjh.png" />
          <p>跨区支援行动计划</p>
        </div>
      </div>
      <div class="tabs top-20">
        <div class="el_tab" @click="toPath('/zymb/mldwx')">
          <img src="@/assets/app/zymb.png" />
          <p>重要目标防护行动计划</p>
        </div>
        <div class="el_tab" @click="toPath('/qbxx/rwxq')">
          <img src="@/assets/app/sjcl.png" />
          <p>情报信息保障计划</p>
        </div>
        <div class="el_tab" @click="toPath('/zhbz/rwxqyy')">
          <img src="@/assets/app/zhbz.png" />
          <p>综合保障计划</p>
        </div>
        <div class="el_tab" @click="toPath('/zzgz/rwxq')">
          <img src="@/assets/app/zzgz.png" />
          <p>政治工作计划</p>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.index_d_Box {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/app/login.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;

  .first-tab-box1 {
    width: 1202px;
    height: 575px;
    position: absolute;
    left: 50%;
    margin-left: -601px;
    top: 50%;
    margin-top: -226.5px;
    background-image: url("@/assets/app/home.png");
    background-position: center center;
    background-size: 100% 100%;
    padding: 165px 61px 0 61px;

    .quite {
      position: absolute;
      right: 30px;
      top: 40px;
      cursor: pointer;
      z-index: 10;
    }

    .title {
      width: 100%;
      color: #d1ebf6;
      font-size: 24px;
      text-align: center;
      position: absolute;
      top: 12px;
      left: 45px;
    }

    .tabs {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .el_tab {
        padding: 5px;
        border: 1px solid transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        border-radius: 10px;

        &:hover {
          border-color: #42afff;
        }

        img {
          width: 168px;
        }

        p {
          text-align: center;
          color: #fff;
          font-size: 20px;
          margin-top: 10px;
        }
      }
    }

    .goout {
      position: absolute;
      right: 56px;
      top: 69px;
      color: #fff;
      font-size: 14px;

      &:hover {
        color: #409eff;
      }
    }
  }
}
</style>
